<template>
  <el-card class="mt30 gradient-vertical" style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <el-row :gutter="20">
          <el-col :span="12"><h1>最新公告 </h1></el-col>
          <el-col :span="12" class="text-right"><el-link @click="onMore(2)">更多 >></el-link></el-col>
        </el-row>
      </div>
      <el-divider />
      <div class="mt10" v-for="item in newData">
        <el-row :gutter="20">
          <el-col :span="18">
            <ul>
              <li><el-link @click="onSee(item)">{{ item.title }}</el-link></li>
            </ul>
          </el-col>
          <el-col :span="6" class="text-right"><el-text>[{{ item.created_at }}]</el-text></el-col>
        </el-row>
      </div>
    </template>
  </el-card>

  <el-dialog v-model="isShow" width="80%">
    <el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" >
        <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
            <el-input v-model="ruleForm.content" type="textarea"/>
        </el-form-item>
    </el-form>
    <el-divider />
    <div class="text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
    </div>
  </el-dialog>

  <el-dialog v-model="isSee" width="50%">
    <h1 class="text-center">{{ info.title }}</h1>
    <el-divider />
    <p class="mt30" v-html="info.content"></p>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import http from '../../../util/request';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import router from '../../../router';
const loading = ref<boolean>(false)
const isShow = ref<boolean>(false)
  const isSee = ref<boolean>(false)
interface RuleForm {
  id:number
  title: string
  type_id: number
  content: string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
  id:0,
  title: '',
  type_id:0,
  content: '',
})
const info = ref<RuleForm>({
    id:0,
    title: '',
    type_id:0,
    content: '',
})
const form = ref<any>({search:'',page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
const postsData = ref<any>([])
const newData = ref<any>([])

const onGetData = () => {
  http.post('/posts/board',form.value).then((response:any)=>{
    postsData.value = response.data.postsData
    newData.value = response.data.newData
  })
}

const rules = reactive<FormRules<RuleForm>>({
  title: [
      { required: true, message: '请输入标题', trigger: 'blur' },
  ],
  content: [
      { required: true, message: '请输入内容', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
      if (valid) {
        loading.value = true
        let request:any = null
        if(ruleForm.value.id){
            request = http.patch('/posts',ruleForm.value)
        }else{
            request = http.put('/posts',ruleForm.value)
        }
        request.then((response:any)=>{
            loading.value = false
            if(response.data.code != 200){
                ElMessage.error(response.data.msg);
                return
            }
            isShow.value = false
            onGetData();
        })
      } else {
          console.log('error submit!', fields)
      }
  })
}

const onSee = (data:any) => {
  info.value.title = data.title
  info.value.content = data.content
  isSee.value = true
}

const onMore = (type:number) => {
  router.push({ name: 'publicList',params: { type: type }})
}

onMounted(()=>{
  onGetData()
})
</script>
<style scoped>
ul{padding-left: 30px;}

/* 垂直方向渐变 */
.gradient-vertical {
  background: linear-gradient(to bottom, #f0dcc6, #FFFFFF);
}
</style>
